---
title: AstroサイトをDenoにデプロイする
description: Denoを使ってAstroサイトをウェブにデプロイする方法。
type: deploy
i18nReady: true
---
import ReadMore from '~/components/ReadMore.astro'

Astroのサーバーサイドレンダリングされたサイトを、世界中のエッジでJavaScript、TypeScript、およびWebAssemblyを実行する分散システムである[Deno Deploy](https://deno.com/deploy)にデプロイできます。

このガイドには、GitHub ActionsまたはDeno DeployのCLIを使用して、Deno Deployにデプロイする手順が含まれています。

## 必要条件

このガイドは、すでに[Deno](https://deno.com/)をインストールしていることを前提としています。

## プロジェクトの設定

このページは、Astroプロジェクトを[Deno Deploy](https://deno.com/deploy)にサーバーサイドレンダリングサイト（SSR）としてデプロイする手順を提供します。

静的サイトをデプロイする場合は、[Deno Deployの静的サイトチュートリアル](https://docs.deno.com/deploy/tutorials/static-site)を参照してください。

### SSR用アダプター

AstroプロジェクトでSSR（サーバーサイドレンダリング）を有効にし、Deno Deployにデプロイするには以下の手順を実行します。

次の`astro add`コマンドで、AstroプロジェクトにSSRを有効にするための[Denoアダプター][Deno adapter]を追加します。このコマンドは、アダプターをインストールし、astro.config.mjsファイルに適切な変更を一括で行います。

```bash
npx astro add deno
```

アダプターを手動でインストールする場合は、以下の2つのステップを実行してください。

1. お好みのパッケージマネージャを使用して、[`@astrojs/deno`アダプター][Deno adapter]をプロジェクトの依存関係にインストールします。npmを使用している、またはよくわからない場合は、ターミナルで以下のコマンドを実行してください。

    ```bash
      npm install @astrojs/deno
    ```

1. プロジェクトの設定ファイル`astro.config.mjs`を以下のように変更します。

    ```js ins={3,6-7}
    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import deno from '@astrojs/deno';

    export default defineConfig({
      output: 'server',
      adapter: deno(),
    });
    ```

    次に、`package.json`の`preview`スクリプトを以下のように変更します。

    ```json del={8} ins={9}
    // package.json
    {
      // ...
      "scripts": {
        "dev": "astro dev",
        "start": "astro dev",
        "build": "astro build",
        "preview": "astro preview"
        "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs"
      }
    }
    ```

    以上により、次のコマンドでDenoを使って本番のAstroサイトをローカルでプレビューできるようになりました。

    ```bash
    npm run preview
    ```

## SSRされるAstroサイトのデプロイ方法

GitHub Actions、またはDeno DeployのCLI（コマンドラインインターフェイス）を使用して、Deno Deployにデプロイできます。

### GitHub Actionsのデプロイメント

プロジェクトがGitHubに保存されている場合は、[Deno Deployのウェブサイト](https://dash.deno.com/)に従って、AstroサイトをデプロイするようにGitHub Actionsを設定できます。

1. 公開または非公開のGitHubリポジトリにコードをプッシュします。

1. GitHubアカウントで[Deno Deploy](https://dash.deno.com/)にサインインし、[New Project](https://dash.deno.com)をクリックします。

1. リポジトリとデプロイしたいブランチを選択し、**GitHub Action**モードを選択します。(Astroサイトではビルドステップが必要なため、自動モードは使用できません。)

1. Astroプロジェクトで、`.github/workflows/deploy.yml`に新しいファイルを作成し、以下のYAMLを貼り付けます。これはDeno Deployが提供するYAMLと似ていますが、Astroサイトに必要なステップが追加されています。

    ```yaml
    name: Deploy
    on: [push]

    jobs:
      deploy:
        name: Deploy
        runs-on: ubuntu-latest
        permissions:
          id-token: write # Deno Deployでの認証に必要です。
          contents: read # リポジトリのクローンに必要です。

        steps:
          - name: Clone repository
            uses: actions/checkout@v4

          # npmを使用していない場合は、`npm ci`を`yarn install`または`pnpm i`に変更してください。
          - name: Install dependencies
            run: npm ci

          # npmを使用していない場合は、`npm run build`を`yarn build`または`pnpm run build`に変更してください。
          - name: Build Astro
            run: npm run build

          - name: Upload to Deno Deploy
            uses: denoland/deployctl@v1
            with:
              project: my-deno-project # TODO： Deno Deployのプロジェクト名に置き換える。
              entrypoint: server/entry.mjs
              root: dist
    ```

1. このYAMLファイルをコミットし、GitHub上の設定したdeployブランチにプッシュすると、自動的にデプロイが始まるはずです！

    GitHubリポジトリページの「Actions」タブ、または[Deno Deploy](https://dash.deno.com)で進捗を確認できます。


### CLIデプロイメント

1. [Deno Deploy CLI](https://docs.deno.com/deploy/manual/deployctl)をインストールします。

    ```bash
    deno install --allow-read --allow-write --allow-env --allow-net --allow-run --no-check -r -f https://deno.land/x/deploy/deployctl.ts
    ```

1. Astroビルドステップを実行します。

    ```bash
    npm run build
    ```

1. `deployctl`を実行してデプロイします！

    以下のコマンドでは、`<ACCESS-TOKEN>`を[Personal Access Token](https://dash.deno.com/account#access-tokens)に、`<MY-DENO-PROJECT>`をDeno Deployのプロジェクト名に置き換えてください。

    ```bash
    DENO_DEPLOY_TOKEN=<ACCESS-TOKEN> deployctl deploy --project=<MY-DENO-PROJECT> --no-static --include=./dist ./dist/server/entry.mjs
    ```

    [Deno Deploy](https://dash.deno.com)ですべてのデプロイを追跡できます。

1.（オプション）ビルドとデプロイを1つのコマンドにまとめるには、`package.json`に`deploy-deno`スクリプトを追加します。

    ```json ins={9}
    // package.json
    {
      // ...
      "scripts": {
        "dev": "astro dev",
        "start": "astro dev",
        "build": "astro build",
        "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs",
        "deno-deploy": "npm run build && deployctl deploy --project=<MY-DENO-PROJECT> --no-static --include=./dist ./dist/server/entry.mjs"
      }
    }
    ```

    その後、このコマンドを使用して、ワンステップでAstroサイトをビルドし、デプロイすることができます。

    ```bash
    DENO_DEPLOY_TOKEN=<ACCESS-TOKEN> npm run deno-deploy
    ```


<ReadMore>[AstroにおけるSSR](/ja/guides/server-side-rendering/)についてもっと読む。</ReadMore>

[Denoアダプター]: https://github.com/denoland/deno-astro-adapter
